<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.clientnum {
			display: flex;
			justify-content: space-between;
		}
		.total,.newclient {
			width: 49%;
			background: #fff;
			display: flex;
			justify-content: space-between;
		}
		.words {
			padding: 12px;
		}
		.userimg1 {
			background: green;
			width: 85px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.userimg2 {
			background: orange;
			width: 85px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.num {
			font-size: 36px;
		}
		.pagetitle {
			font-size: 18px;
		}
		.top {
			position: absolute;
			top: 20px;
			right: 20px;
			z-index: 666;
		}
		.mainbox {
			position: relative;
			border: 1px solid #ccc;
			padding: 20px 0;
		}
		.addnew {
			border: 1px solid #ccc;
			padding: 6px 13px;
			border-radius: 4px;
		}
		.table {
			border: 1px solid #ccc;
			margin-top: 20px;
		}
		.el-table__row img {
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}
		.pagenation {
			text-align: center;
			margin-top: 10px;
		}
		.whitebox {
			background: #fff;
			margin-top: 20px;
		}
		.searchbox {
			text-align: right;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
	</style>
</block>
<block name="content">
	<div class="clientnum">
		<div class="total">
			<div class="words">
				<div class="title">客户总数</div>
				<div class="num">{$count}</div>
			</div>
			<div class="userimg1"><img src="__PUBLIC__/orderAdmin/img/user.png" alt=""></div>
		</div>
		<div class="newclient">
			<div class="words">
				<div class="title">本月新增客户数</div>
				<div class="num">{$thisMonthCount}</div>
			</div>
			<div class="userimg2"><img src="__PUBLIC__/orderAdmin/img/user.png" alt=""></div>
		</div>
	</div>
	<div class="whitebox">
		<div class="mainbox">
			<div class="top">
				<el-button type="success" icon="el-icon-circle-plus-outline" class="addnew" @click="toAddClient">添加客户</el-button>
			</div>
			<el-tabs v-model="activetab" type="card">
				<el-tab-pane label="全部客户" name="all">
					<div class="searchbox">
						<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeParam" v-model="param.key">
							<i slot="suffix" class="el-input__icon el-icon-search"></i>
						</el-input>
					</div>
					<div class="table">
						<el-table :data="tableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}">
							<el-table-column prop="headimg" label="头像">
								<template slot-scope="scope"><img :src="scope.row.headimg" alt=""></template>
							</el-table-column>
							<el-table-column prop="company_ak" label="公司简称"></el-table-column>
							<el-table-column prop="name" label="审核员"></el-table-column>
							<el-table-column prop="mobile" label="登录手机"></el-table-column>
							<el-table-column prop="city" label="城市"></el-table-column>
							<el-table-column prop="charger" label="项目负责人"></el-table-column>
							<el-table-column prop="stauts" label="状态">
								<template slot-scope="scope">
									<span v-if="scope.row.status == '1'">启用</span>
									<span v-if="scope.row.status == '0'">禁用</span>
								</template>
							</el-table-column>
							<el-table-column prop="option" label="操作">
								<template slot-scope="scope">
									<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.id)">查看</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-tab-pane>
			</el-tabs>

			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
							   @current-change="handleCurrentChange" :page-size="param.size" :total="total"></el-pagination>
			</div>
		</div>
	</div>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    param: {
                        key: '',
                        page: 1,
                        size: 10
                    },
                    total: 0,
                    tableData: [],
                    activetab: "all",
                }
            },
            created : function () {
                this.getData();
            },
            methods: {
                getData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Audit/getData', _this.param, function (data) {
                        if(data.status){
                            _this.total = parseInt(data.data.count);
                            _this.tableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleSizeChange: function (size) {
                    this.param.size = size;
                    this.getData();
                },
                handleCurrentChange: function (page) {
                    this.param.page = page;
                    this.getData();
                },
                changeParam: function () {
                    this.param.page = 1,
                        this.getData();
                },
                toDetail(id) {
                    window.location.href = HOME_URL+"/orderAdmin/Audit/detail?id=" + id;
                },
                toAddClient() {
                    window.location.href = HOME_URL+"/orderAdmin/Audit/add";
                }
            }
        });
	</script>
</block>
